
<template>
  <div style="color: cornflowerblue">
    <el-row>
      <el-col :span="24">
        <el-card class="box-card">
          <div class="text item">
            <el-row>
              <el-col :span="2">
                <el-row>
                  <el-col :span="24">
                    <div
                      style="
                        width: 100px;
                        height: 100px;
                        border: 1px solid white;
                        background-color: cornflowerblue;
                        text-align: center;
                        position: fixed;
                      "
                    >
                      <span style="color: white; line-height: 100px"
                        >基本信息</span
                      >
                    </div>
                    <div
                      style="
                        width: 100px;
                        height: 100px;
                        border: 1px solid white;
                        background-color: cornflowerblue;
                        text-align: center;
                        margin-top: 100px;
                        position: fixed;
                      "
                    >
                      <span style="color: white; line-height: 100px"
                        >上传附件</span
                      >
                    </div>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="22">
                <el-row>
                  <el-col :span="24">
                    <br />
                    <span style="color: cornflowerblue">账单信息</span>
                    <br />
                    <br />
                    <hr />
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form
                      v-loading="loading"
                      ref="elForm"
                      :model="ruleForm"
                      :rules="rules"
                      size="mini"
                      label-width="150px"
                      label-position="left"
                    >
                      <el-row>
                        <el-col :span="10">
                          <el-row>
                            <el-col :span="15">
                              <el-form-item
                                style="margin-left: 0px"
                                label="到账金额(单位:元):"
                                prop="billingMoney"
                              >
                                <el-input
                                  v-model="ruleForm.billingMoney"
                                  clearable
                                  :style="{ width: '100%' }"
                                  placeholder="请填写到账金额"
                                ></el-input>
                              </el-form-item>
                            </el-col>
                            <el-col :span="3"> </el-col>
                          </el-row> </el-col
                        ><el-col :span="4">&nbsp;</el-col>
                        <el-col :span="10">
                          <el-row>
                            <el-col :span="15">
                              <el-form-item
                                style="margin-left: 0px"
                                label="来款单位:"
                                prop="billingUnit"
                              >
                                <el-input
                                  v-model="ruleForm.billingUnit"
                                  clearable
                                  :style="{ width: '100%' }"
                                  placeholder="请填写来款单位"
                                ></el-input>
                              </el-form-item>
                            </el-col>
                            <el-col :span="3"> </el-col>
                          </el-row>
                        </el-col>
                      </el-row>

                      <el-row>
                        <el-col :span="10">
                          <el-row>
                            <el-col :span="15">
                              <el-form-item
                                style="margin-left: 0px"
                                label="财务到账时间:"
                                prop="billingTime"
                                
                              >
                                <el-date-picker
                                 type="date"
                                  v-model="ruleForm.billingTime"
                                  format="YYYY年-MM月-DD日"
                                  value-format="YYYY-MM-DD"
                                  :style="{ width: '100%' }"
                                  clearable
                                  placeholder="请填写财务到账时间"
                                ></el-date-picker>
                              </el-form-item>
                            </el-col>
                            <el-col :span="3"> </el-col>
                          </el-row> </el-col
                        ><el-col :span="4">&nbsp;</el-col>
                        <el-col :span="10">
                          <el-row>
                            <el-col :span="15">
                              <el-form-item
                                style="margin-left: 0px"
                                label="银行卡号:"
                                prop="billingBank"
                              >
                                <el-input
                                  v-model="ruleForm.billingBank"
                                  clearable
                                  :style="{ width: '100%' }"
                                  placeholder="请填写银行卡号"
                                ></el-input>
                              </el-form-item>
                            </el-col>
                            <el-col :span="3"> </el-col>
                          </el-row>
                        </el-col>
                      </el-row>
                      <el-col :span="15">
                        <el-form-item label="摘要：" prop="billingAbstract">
                          <el-input
                            type="textarea"
                            v-model="ruleForm.billingAbstract"
                            placeholder="请填写摘要"
                          ></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="15">
                        <el-form-item label="其他：" prop="billingRests">
                          <el-input
                            type="textarea"
                            v-model="ruleForm.billingRests"
                            placeholder="请填写其他"
                          ></el-input>
                        </el-form-item>
                      </el-col>

                      <el-row>
                        <el-col :span="24">
                          <br />
                          <span style="color: cornflowerblue">文件上传</span>
                          <br />
                          <br />
                          <hr />
                          入账单：
                          <br />
                          <span style="color: red; font-weight: 900"
                            ><i class="el-icon-caret-bottom"></i>
                            所需上传文件明细:</span
                          >
                          <br />
                          <el-upload
                            class="upload-demo"
                            drag
                            action="http://localhost:9991/api/tb_project_appendix/UploadImgToQiNiu"
                            style="width: 90%"
                            multiple
                            :on-success="Upic"
                          >
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">
                              将文件拖到此处，或<em>点击上传</em>
                            </div>
                            <div class="el-upload__tip">
                              只能上传.jpg, .jpeg, .png, .gif, .doc, .docx,
                              .pdf, .xls, .xlsx , .txt文件，且不超过2MB
                            </div>
                          </el-upload>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="24">
                          <el-form-item label="" prop="attachmentId" required>
                            <el-upload
                              ref="attachmentId"
                              :file-list="attachmentIdfileList"
                              :action="attachmentIdAction"
                              :before-upload="attachmentIdBeforeUpload"
                            >
                            </el-upload>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="24">
                          <el-row>
                            <el-col :span="8"></el-col>
                            <el-col :span="8">
                              <el-form-item size="large">
                                <el-button type="primary" @click="submitForm"
                                  >提交</el-button
                                >
                              </el-form-item>
                            </el-col>
                            <el-col :span="8"></el-col>
                          </el-row>
                        </el-col>
                      </el-row>
                    </el-form>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
  <script>
import data from "../../builder/builderData";
export default {
  data() {
    return {
      ruleForm: {
        billingUnit: "", //来款单位
        billingTime: "", //财务到款时间
        billingMoney: 0, //到账金额(单位:元)
        billingBank: "", //银行卡号
        billingAbstract: "", //摘要
        billingRests: "", //其他
        creator: JSON.parse(localStorage.getItem("user")).userName,
        createDate: new Date(),
        isDelete:0,
        file: [], //上传附件
      },
      rules: {
        billingUnit: [
          { required: true, message: "请输入来款单位", trigger: "blur" },
          
        ],
        billingBank: [
          { required: true, message: "请输入银行卡号", trigger: "blur" },
        ],
        billingTime: [
          { type:"date",  required: true, message: "请输入财务到款时间", trigger: "change" },
        ],
        billingMoney: [
          {
            required: true,
            message: "请输入到账金额(单位:元)",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    //添加
    submitForm() {
      console.log(JSON.parse(localStorage.getItem("user")).userName);
      //console.log(this.ruleForm.billingMoney);
      this.ruleForm.billingMoney = Number(this.ruleForm.billingMoney);
      this.http
        .post("/api/tb_project_billing/BiillingAdd", this.ruleForm)
        .then((res) => {
          if (res.status) {
            //console.log(res);
            this.$message({
              message: "入账单添加成功",
              type: "success",
            });
            this.$router.push("/tb_project_billingList");
          }
          else{
            this.$message({
              message: "入账单添加失败",
              type: "error",
            });
          }
        });
    },
    //上传
    Upic(val) {
      if (val.code) {
        var list = {
          appendixUrl: val.filePath,
          appendixName: val.fileName,
        };
        this.ruleForm.file.push(list);
      } else {
        this.$message(val.message);
      }
      // var list = {
      //   appendixUrl: val.filePath,
      //   appendixName: val.fileName,
      // };
      // console.log(list);
      // this.ruleForm.file.push(list);
    },
  },
};
</script>
  
  
  <style>
.ipt {
  border: none;
  outline: none;
  height: 30px;
  border-bottom: 1px solid #ccc;
}
.el-upload__tip {
  line-height: 1.2;
}
.ll {
  background-color: cornflowerblue;
  margin-left: 20px;
  width: 100px;
  height: 100px;
  line-height: 100px;
  margin-top: 5px;
}
.el-input__wrapper {
  display: inline-flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  padding: 1px 11px;
  background-color: var(--el-input-bg-color, var(--el-fill-color-blank));
  background-image: none;
  border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
  transition: var(--el-transition-box-shadow);
  box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color))
    inset;
  border-bottom: 1px solid;
}
.el-form-item.is-error .el-input__wrapper {
  box-shadow: 0 0 0 1px #ffffff inset;
}
.el-input__wrapper.is-focus {
  box-shadow: 0 0 0 1px white inset;
}
.el-input {
  --el-input-text-color: var(--el-text-color-regular);
  --el-input-border: var(--el-border);
  --el-input-hover-border: var(--el-border-color-hover);
  --el-input-focus-border: var(--el-color-primary);
  --el-input-transparent-border: 0 0 0 1px transparent inset;
  --el-input-border-color: var(--el-border-color);
  --el-input-border-radius: var(--el-border-radius-base);
  --el-input-bg-color: var(--el-fill-color-blank);
  --el-input-icon-color: var(--el-text-color-placeholder);
  --el-input-placeholder-color: var(--el-text-color-placeholder);
  --el-input-hover-border-color: #ffffff;
  --el-input-clear-hover-color: var(--el-text-color-secondary);
  --el-input-focus-border-color: var(--el-color-primary);
}
.el-select {
  --el-select-border-color-hover: #ffffff;
  --el-select-disabled-border: var(--el-disabled-border-color);
  --el-select-font-size: var(--el-font-size-base);
  --el-select-close-hover-color: var(--el-text-color-secondary);
  --el-select-input-color: var(--el-text-color-placeholder);
  --el-select-multiple-input-color: var(--el-text-color-regular);
  --el-select-input-focus-border-color: #ffffff;
  --el-select-input-font-size: 14px;
}
.el-header,
.el-footer {
  background-color: #cdd6e1;
  color: #333;
  text-align: center;
  line-height: 10px;
}
</style>
   